<template>
  <div class="new-tab-page large parkinglot-wrapper">
    <ul class="tab">
      <li
        class="tab-item"
        :class="{ active: stepNum >= index }"
        v-for="(item, index) in tabItems"
        :key="item"
      >
        <div class="step-num">{{ index + 1 }}</div>
        {{ item }}
        <i class="el-icon-arrow-right tab-icon" v-if="index !== 3"></i>
      </li>
    </ul>
    <ActivationCode
      v-if="currentTab === '激活码'"
      @setFormData="setFormData"
      @goNextStep="goNextStep"
      :old-activation-code="addParkingLotData.activationCode"
    ></ActivationCode>
    <ParkingLotInfo
      v-if="currentTab === '车场信息'"
      @setFormData="setFormData"
      @goBackSetp="goBackSetp"
      @goNextStep="goNextStep"
      :old-park-base-info="addParkingLotData.parkBaseInfo"
    ></ParkingLotInfo>
    <ChannelSetting
      v-if="currentTab === '通道配置'"
      @setFormData="setFormData"
      @goBackSetp="goBackSetp"
      @submitForm="submitForm"
      :old-channel-list="addParkingLotData.channelVoList"
    ></ChannelSetting>
    <Rule
      v-if="currentTab === '收费规则'"
      @setFormData="setFormData"
      @goBackSetp="goBackSetp"
      @goNextStep="goNextStep"
      :old-park-base-info="addParkingLotData.parkBaseInfo"
      :old-page-charge-list="addParkingLotData.pageChargeList"
      :old-park-special-charge-vo-list="addParkingLotData.parkSpecialChargeVoList"
    ></Rule>

    <el-dialog
      title="下载通道编码"
      :visible.sync="dialogVisible"
      width="440px"
      class="zb-dialog downChannelQrs-container"
      custom-class="zb-center-dialog"
      :close-on-click-modal="false"
      @closed="dialogClosed"
    >
      <div class="dialog-content">
        <p>
          请下载通道编码!点击
          <a href="javascript:;" @click="downloadChannelCode">马上下载</a>
        </p>
        <p>或可以在【车场卡片】- 【通道配置】里下载通道编码</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ActivationCode from "./AddParkingLotComponents/ActivationCode/index.vue";
import ParkingLotInfo from "./AddParkingLotComponents/ParkingLotInfo/index.vue";
import ChannelSetting from "./AddParkingLotComponents/ChannelSetting/index.vue";
import Rule from "./AddParkingLotComponents/rule/index.vue";
import submite from "./submite.js";
import utils from "@/mixins/utils.js";
import { setInterval, clearInterval } from "timers";
const tabItems = ["激活码", "车场信息", "收费规则", "通道配置"];
export default {
  name: "addParkingLot",
  mixins: [submite, utils],
  components: {
    ActivationCode,
    ParkingLotInfo,
    ChannelSetting,
    Rule
  },
  data() {
    return {
      tabItems,
      currentTab: "激活码",
      // currentTab: '收费规则',
      addParkingLotData: {},
      dialogVisible: false,
      parkId: null
    };
  },
  created() {
    this.resetFormDataInLocalData();
    if (this.$route.query.isNeedAddParkinglotFirst) {
      this.$store.commit(
        "SET_NEEPADDPARKINGLOTINGLOT",
        JSON.parse(this.$route.query.isNeedAddParkinglotFirst)
      );
    }
  },
  methods: {
    setCurrentTab(item) {
      this.currentTab = item;
    },
    setFormData(key, data) {
      this.addParkingLotData[key] = data;
      localStorage.setItem(
        "addParkingLotData",
        JSON.stringify(this.addParkingLotData)
      );
    },
    goBackSetp() {
      const stepIndex = this.tabItems.indexOf(this.currentTab);
      this.currentTab = this.tabItems[stepIndex - 1];
    },
    goNextStep() {
      const stepIndex = this.tabItems.indexOf(this.currentTab);
      this.currentTab = this.tabItems[stepIndex + 1];
    },
    resetFormDataInLocalData() {
      const localData = localStorage.getItem("addParkingLotData");
      if (localData) {
        this.addParkingLotData = JSON.parse(localData);
      }
    }
  },
  computed: {
    stepNum() {
      let step;
      this.tabItems.some((item, index) => {
        if (item === this.currentTab) {
          step = index;
          return true;
        }
      });
      return step;
    }
  }
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
